<template>
  <div class="product-detail">
    <!-- 顶部导航 -->
    <div class="detail-header">
      <div class="header-left">
        <el-button @click="goBack" type="primary" plain>
          <el-icon><ArrowLeft /></el-icon>
          返回列表
        </el-button>
        <span class="page-title">溯源详情</span>
      </div>
      <div class="header-right">
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="detail-content" v-loading="queryLoading" element-loading-text="正在加载追溯信息...">
      <!-- 产品基本信息卡片 -->
      <div class="product-card">
        <div class="product-image">
          <el-image 
            v-if="productData.photoUrl" 
            :src="productData.photoUrl" 
            fit="cover"
            :preview-src-list="[productData.photoUrl]"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
          <div v-else class="no-image">
            <el-icon><Picture /></el-icon>
            <span>暂无图片</span>
          </div>
        </div>
        
        <div class="product-info">
          <div class="product-header">
            <h2 class="product-name">{{ productData.productName || productData.name }} <span class="product-taste">(麻辣味)</span></h2>
            <div class="product-meta">
              <span class="production-date">生产日期: {{ formatDate(productData.createdTime) || productData.productionDate || '2021018' }}</span>
              <span class="shelf-life">保质期: {{ productData.shelfLife || productData.days }}天</span>
            </div>
            <div class="product-meta">
              <span class="batch-number">生产许可证号: {{ productData.productionLicenseNumber || productData.license }}</span>
              <span class="company">生产企业: {{ productData.manufacturerName || productData.company }}</span>
            </div>
            <div class="product-meta" v-if="productData.productionBatch">
              <span class="production-batch">生产批次: {{ productData.productionBatch }}</span>
            </div>
          </div>

          <!-- 产品检验信息 -->
          <div class="inspection-section">
            <h3 class="section-title">产品检验信息</h3>
            <div class="inspection-images">
              <!-- 已上传的文件 -->
              <div 
                v-for="(file, index) in inspectionFiles" 
                :key="index" 
                class="inspection-item"
              >
                <el-image 
                  :src="file.url" 
                  fit="cover"
                  class="inspection-img"
                  :preview-src-list="[file.url]"
                >
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Document /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="file-actions">
                  <el-button 
                    type="danger" 
                    size="small" 
                    circle
                    @click="removeInspectionFile(index)"
                  >
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
              
              <!-- 添加文件按钮 -->
              <div class="add-inspection" @click="triggerFileUpload">
                <el-icon><Plus /></el-icon>
                <span class="upload-text">上传图片</span>
              </div>
              
              <!-- 隐藏的文件输入 -->
              <input
                ref="fileInput"
                type="file"
                multiple
                accept="image/*,.pdf,.doc,.docx"
                style="display: none"
                @change="handleFileSelect"
              />
              
              <!-- 文件计数 -->
              <div class="inspection-count" v-if="inspectionFiles.length > 0">
                <el-icon><InfoFilled /></el-icon>
                <span>{{ inspectionFiles.length }}</span>
              </div>
            </div>
            
            <!-- 上传进度 -->
            <div v-if="uploading" class="upload-progress">
              <el-progress 
                :percentage="uploadProgress" 
                :status="uploadProgress === 100 ? 'success' : ''"
              />
              <span class="progress-text">正在上传图片...</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 标签页内容 -->
      <div class="detail-tabs">
        <el-tabs v-model="activeTab" class="detail-tabs-container" @tab-change="handleTabChange">
          <el-tab-pane :label="`养殖信息 (${breedingCount}/${breedingCount})`" name="breeding">
            <BreedingInfo 
              :data="breedingData" 
              :healthData="healthData"
              :quarantineCertificates="breedingQuarantineCertificates"
              :enterpriseData="enterpriseData"
              :enterprisePhotos="enterprisePhotos"
              @save="onSaveBreeding" 
              @cancel="onCancelBreeding"
              @updateHealth="onUpdateHealth"
              @updateCertificates="onUpdateBreedingCertificates"
              @updateEnterprise="onUpdateBreedingEnterprise"
              @updatePhotos="onUpdateBreedingPhotos"
            />
          </el-tab-pane>
          <el-tab-pane :label="`屠宰信息 (${slaughterCount}/${slaughterCount})`" name="slaughter">
            <SlaughterInfo 
              :data="slaughterData" 
              :quarantineData="quarantineData"
              :quarantineCertificates="quarantineCertificates"
              :enterpriseData="slaughterEnterpriseData"
              :enterprisePhotos="slaughterEnterprisePhotos"
              @save="onSaveSlaughter" 
              @cancel="onCancelSlaughter"
              @updateQuarantine="onUpdateQuarantine"
              @updateCertificates="onUpdateSlaughterCertificates"
              @updateEnterprise="onUpdateSlaughterEnterprise"
              @updatePhotos="onUpdateSlaughterPhotos"
            />
          </el-tab-pane>
          <el-tab-pane :label="`深加工信息 (${processingCount}/5)`" name="processing">
            <ProcessingInfo 
              :data="processingData" 
              :personnelHygienePhotos="personnelHygienePhotos"
              :supplierInfoPhotos="supplierInfoPhotos"
              :enterpriseData="processingEnterpriseData"
              :enterprisePhotos="processingEnterprisePhotos"
              @save="onSaveProcessing" 
              @cancel="onCancelProcessing"
              @updatePersonnelHygiene="onUpdatePersonnelHygiene"
              @updateSupplierInfo="onUpdateSupplierInfo"
              @updateEnterprise="onUpdateProcessingEnterprise"
              @updatePhotos="onUpdateProcessingPhotos"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  Picture,
  Document,
  Plus,
  InfoFilled,
  Delete
} from '@element-plus/icons-vue'
import BreedingInfo from './BreedingInfo.vue'
import SlaughterInfo from './SlaughterInfo.vue'
import ProcessingInfo from './ProcessingInfo.vue'
import { get } from '../utils/request'

const route = useRoute()
const router = useRouter()
const activeTab = ref('breeding')
 
// 产品数据
const productData = ref({
  id: '',
  name: '',
  batch: '',
  company: '',
  license: '',
  days: 0,
  percent: 0,
  photoUrl: '',
  productionDate: '',
  productionBatch: '',
  shelfLife: 0,
  productionLicenseNumber: '',
  manufacturerName: '',
  informationCompleteness: 0,
  // API返回的字段
  traceabilityId: 0,
  productId: 0,
  productName: '',
  createdBy: '',
  createdTime: '',
  modifiedBy: '',
  modifiedTime: '',
  isDeleted: false
})


// 养殖信息数据
const breedingData = ref({
  variety: '伊拉兔',
  source: '采购',
  feedingDays: 90,
  feedBrand: '大北兔',
  responsiblePerson: '小陈',
  productionDate: '2021年10月18日'
})

// 保健信息数据
const healthData = ref([
  {
    id: 1,
    feedingDays: 35,
    healthMethod: '兔瘟单苗',
    healthApproach: '皮下注射',
    isEditing: false
  },
  {
    id: 2,
    feedingDays: 40,
    healthMethod: '巴二联苗',
    healthApproach: '皮下注射',
    isEditing: false
  }
])

// 动检证数据
const breedingQuarantineCertificates = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '动检证1.jpg'
  }
])

// 企业信息数据
const enterpriseData = ref({
  farm: '四川锦祥养殖基地',
  responsiblePerson: 'X总',
  stockQuantity: 3200
})

// 企业照片数据
const enterprisePhotos = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '企业照片1.jpg'
  },
  {
    id: 2,
    url: '/api/placeholder/200/150',
    name: '企业照片2.jpg'
  }
])

// 屠宰信息数据
const slaughterData = ref({
  batch: '20210718',
  averageWeight: 20,
  arrivalTime: '2021年10月18日 18:32:21',
  slaughterTime: '2021年10月19日 10:30:20'
})

// 屠宰检疫信息数据
const quarantineData = ref([
  {
    id: 1,
    inspectionDate: '2021年10月15日',
    inspector: '李四',
    result: '合格',
    certificate: 'QJ20211015001',
    isEditing: false
  },
  {
    id: 2,
    inspectionDate: '2021年10月16日',
    inspector: '王五',
    result: '合格',
    certificate: 'QJ20211016001',
    isEditing: false
  }
])

// 检疫证明数据
const quarantineCertificates = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '宰前检疫.jpg',
    label: '宰前检疫'
  },
  {
    id: 2,
    url: '/api/placeholder/200/150',
    name: '宰后质检.jpg',
    label: '宰后质检'
  }
])

// 屠宰企业信息数据
const slaughterEnterpriseData = ref({
  companyName: '四川锦祥食品有限公司',
  establishmentDate: '2016年7月18日',
  address: '四川省巴中市通江县 XXX',
  profile: '企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介'
})

// 屠宰企业照片数据
const slaughterEnterprisePhotos = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '企业照片1.jpg'
  },
  {
    id: 2,
    url: '/api/placeholder/200/150',
    name: '企业照片2.jpg'
  }
])

// 深加工信息数据
const processingData = ref({
  team: '生产1组',
  responsiblePerson: '小陈'
})

// 人员卫生情况数据
const personnelHygienePhotos = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '人员卫生1.jpg'
  },
  {
    id: 2,
    url: '/api/placeholder/200/150',
    name: '人员卫生2.jpg'
  }
])

// 供应商信息数据
const supplierInfoPhotos = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '供应商信息1.jpg'
  },
  {
    id: 2,
    url: '/api/placeholder/200/150',
    name: '供应商信息2.jpg'
  }
])

// 深加工企业信息数据
const processingEnterpriseData = ref({
  companyName: '四川锦祥食品有限公司',
  productionLicenseNumber: 'SC213205427680'
})

// 深加工企业照片数据
const processingEnterprisePhotos = ref([
  {
    id: 1,
    url: '/api/placeholder/200/150',
    name: '企业照片1.jpg'
  },
  {
    id: 2,
    url: '/api/placeholder/200/150',
    name: '企业照片2.jpg'
  }
])

// 计算属性：各标签页的数据统计
const breedingCount = computed(() => Object.keys(breedingData.value).length)
const slaughterCount = computed(() => Object.keys(slaughterData.value).length)
const processingCount = computed(() => Object.keys(processingData.value).length)

// 查询相关状态
const queryLoading = ref(false)
const queryForm = ref({
  productionBatch: ''
})
const hasSearched = ref(false)
const hasQueryResult = computed(() => hasSearched.value && productData.value.productName)

// 文件上传相关状态
const fileInput = ref<HTMLInputElement>()
const inspectionFiles = ref<Array<{
  url: string
  name: string
  size: number
  type: string
}>>([])
const uploading = ref(false)
const uploadProgress = ref(0)

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
// 根据生产批次查询追溯信息
const queryByBatch = async () => {
  const batch = route.query.batch as string
  if (!batch) {
    console.log('未找到生产批次参数，跳过自动查询')
    return
  }

  queryLoading.value = true
  try {
    console.log('开始查询生产批次:', batch)
    const response = await get(`http://localhost:5038/api/TraceabilityInfo/GetByBatch/ByBatch/${batch}`)
    
    if (response.code === 300 && response.data) {
      // 更新产品数据
      productData.value = {
        ...productData.value,
        ...response.data
      }
      hasSearched.value = true
      console.log('追溯信息查询成功:', response.data)
      ElMessage.success('追溯信息加载成功')
    } else {
      console.error('API返回错误:', response.message)
      ElMessage.error(response.message || '查询失败，未找到相关追溯信息')
    }
  } catch (error) {
    console.error('查询追溯信息失败:', error)
    ElMessage.error('查询失败，请检查网络连接或稍后重试')
  } finally {
    queryLoading.value = false
  }
}

// 文件上传相关方法
const triggerFileUpload = () => {
  fileInput.value?.click()
}

const handleFileSelect = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = target.files
  
  if (!files || files.length === 0) return
  
  uploading.value = true
  uploadProgress.value = 0
  
  try {
    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      await uploadFile(file)
      uploadProgress.value = ((i + 1) / files.length) * 100
    }
    
    ElMessage.success('文件上传成功')
  } catch (error) {
    console.error('文件上传失败:', error)
    ElMessage.error('文件上传失败')
  } finally {
    uploading.value = false
    uploadProgress.value = 0
    // 清空文件输入
    if (target) {
      target.value = ''
    }
  }
}

const uploadFile = async (file: File): Promise<void> => {
  const formData = new FormData()
  formData.append('files', file)
  
  try {
    const response = await fetch('http://localhost:5038/api/FileUpload/upload-batch', {
      method: 'POST',
      body: formData
    })
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const result = await response.json()
    
    if (Array.isArray(result) && result.length > 0) {
      const uploadResult = result[0]
      if (uploadResult.success && uploadResult.url) {
        inspectionFiles.value.push({
          url: uploadResult.url,
          name: file.name,
          size: file.size,
          type: file.type
        })
      } else {
        throw new Error(uploadResult.message || '上传失败')
      }
    } else {
      throw new Error('上传响应格式错误')
    }
  } catch (error) {
    console.error('上传文件失败:', error)
    throw error
  }
}

const removeInspectionFile = (index: number) => {
  inspectionFiles.value.splice(index, 1)
  ElMessage.success('文件已删除')
}

// 返回列表
const goBack = () => {
  router.back()
}

// 标签页切换处理
const handleTabChange = (tabName: string) => {
  console.log('切换到标签页:', tabName)
}

// 初始化数据
const initData = async () => {
  try {
    // 从路由参数和查询参数中获取数据
    const { id } = route.params
    const query = route.query
    
    productData.value = {
      id: id as string,
      name: query.name as string || '',
      batch: query.batch as string || '',
      company: query.company as string || '',
      license: query.license as string || '',
      days: Number(query.days) || 0,
      percent: Number(query.percent) || 0,
      photoUrl: query.photoUrl as string || '',
      productionDate: query.productionDate as string || '',
      productionBatch: query.productionBatch as string || '',
      shelfLife: Number(query.shelfLife) || 0,
      productionLicenseNumber: query.productionLicenseNumber as string || '',
      manufacturerName: query.manufacturerName as string || '',
      informationCompleteness: Number(query.informationCompleteness) || 0,
      // API返回的字段
      traceabilityId: 0,
      productId: 0,
      productName: '',
      createdBy: '',
      createdTime: '',
      modifiedBy: '',
      modifiedTime: '',
      isDeleted: false
    }
    
    console.log('初始化产品详情数据:', productData.value)
    console.log('路由查询参数:', query)
    
    // 如果有生产批次参数，自动执行查询
    if (query.batch) {
      await queryByBatch()
    }
    
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('数据加载失败')
  }
}

onMounted(() => {
  initData()
})

// 事件处理函数
const onSaveBreeding = (data: any) => {
  breedingData.value = { ...data }
  ElMessage.success('养殖信息保存成功')
}

const onCancelBreeding = () => {
  ElMessage.info('已取消编辑')
}

const onSaveSlaughter = (data: any) => {
  slaughterData.value = { ...data }
  ElMessage.success('屠宰信息保存成功')
}

const onCancelSlaughter = () => {
  ElMessage.info('已取消编辑')
}

const onSaveProcessing = (data: any) => {
  processingData.value = { ...data }
  ElMessage.success('深加工信息保存成功')
}

const onCancelProcessing = () => {
  ElMessage.info('已取消编辑')
}

// 养殖信息相关事件处理
const onUpdateHealth = (data: any[]) => {
  healthData.value = [...data]
  ElMessage.success('保健信息更新成功')
}

const onUpdateBreedingCertificates = (data: any[]) => {
  breedingQuarantineCertificates.value = [...data]
  ElMessage.success('动检证更新成功')
}

const onUpdateBreedingEnterprise = (data: any) => {
  enterpriseData.value = { ...data }
  ElMessage.success('养殖企业信息更新成功')
}

const onUpdateBreedingPhotos = (data: any[]) => {
  enterprisePhotos.value = [...data]
  ElMessage.success('养殖企业照片更新成功')
}

// 屠宰信息相关事件处理
const onUpdateQuarantine = (data: any[]) => {
  quarantineData.value = [...data]
  ElMessage.success('检疫信息更新成功')
}

const onUpdateSlaughterCertificates = (data: any[]) => {
  quarantineCertificates.value = [...data]
  ElMessage.success('检疫证明更新成功')
}

const onUpdateSlaughterEnterprise = (data: any) => {
  slaughterEnterpriseData.value = { ...data }
  ElMessage.success('屠宰企业信息更新成功')
}

const onUpdateSlaughterPhotos = (data: any[]) => {
  slaughterEnterprisePhotos.value = [...data]
  ElMessage.success('屠宰企业照片更新成功')
}

// 深加工信息相关事件处理
const onUpdatePersonnelHygiene = (data: any[]) => {
  personnelHygienePhotos.value = [...data]
  ElMessage.success('人员卫生情况更新成功')
}

const onUpdateSupplierInfo = (data: any[]) => {
  supplierInfoPhotos.value = [...data]
  ElMessage.success('供应商信息更新成功')
}

const onUpdateProcessingEnterprise = (data: any) => {
  processingEnterpriseData.value = { ...data }
  ElMessage.success('深加工企业信息更新成功')
}

const onUpdateProcessingPhotos = (data: any[]) => {
  processingEnterprisePhotos.value = [...data]
  ElMessage.success('深加工企业照片更新成功')
}
</script>

<style scoped>
.product-detail {
  background: #f5f7f9;
  min-height: 100vh;
  padding: 0;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.header-right {
  display: flex;
  gap: 12px;
}

.detail-content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 24px;
}

.product-image {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.product-image .el-image {
  width: 100%;
  height: 100%;
}

.image-error,
.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #c0c4cc;
  font-size: 14px;
}

.image-error .el-icon,
.no-image .el-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.product-info {
  flex: 1;
}

.product-header {
  margin-bottom: 24px;
}

.product-name {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-taste {
  background: #1890ff;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.product-meta {
  display: flex;
  gap: 32px;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.product-meta span {
  display: flex;
  align-items: center;
}

.batch-query-section {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
  margin-bottom: 20px;
}

.query-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.inspection-section {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inspection-images {
  display: flex;
  gap: 12px;
  align-items: center;
}

.inspection-item {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}

.inspection-img {
  width: 100%;
  height: 100%;
}

.add-inspection,
.add-attachment,
.add-gallery {
  width: 80px;
  height: 60px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8c939d;
  transition: all 0.3s;
}

.add-inspection:hover,
.add-attachment:hover,
.add-gallery:hover {
  border-color: #409eff;
  color: #409eff;
}

.upload-text {
  font-size: 10px;
  margin-top: 2px;
}

.inspection-item {
  position: relative;
}

.file-actions {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
}

.upload-progress {
  margin-top: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.progress-text {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.inspection-count,
.attachment-count,
.gallery-count {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
}

.detail-tabs {
  background: white;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-tabs-container {
  padding: 0;
}

.attachment-section,
.enterprise-section,
.enterprise-images {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-grid,
.image-gallery {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.attachment-item,
.gallery-item {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}

.attachment-img,
.gallery-img {
  width: 100%;
  height: 100%;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #c0c4cc;
  font-size: 12px;
}

.image-placeholder .el-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.enterprise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.enterprise-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.enterprise-item label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
}

.enterprise-item span {
  color: #2c3e50;
}

.info-count {
  background: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-left,
  .header-right {
    justify-content: center;
  }

  .product-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .product-image {
    width: 120px;
    height: 120px;
  }

  .product-meta {
    flex-direction: column;
    gap: 8px;
  }

  .enterprise-grid {
    grid-template-columns: 1fr;
  }

  .attachment-grid,
  .image-gallery {
    justify-content: center;
  }
}
</style>
